<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        {{msg}}

    </div>

<!--js代码逻辑-->

    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script>
        let app = new Vue({
            el: '#app',
            data: {
                msg:'hello vue!',
            },
            // 在实例初始化之前、数据观测（data observer）和event/watcher事件配置之前被调用。
            beforeCreate:function(){
                console.log('beforeCreate')
            },
            // 在实例创建完成之后被调用，完成以下配置：数据贯彻、属性和方法的运算、watch\event时间回调。
            created:function(){
                console.log('created')
            },
            // 挂载之前被调用，相关的渲染函数首次被调用。
            beforeMounted:function () {
                console.log('beforeMounted')
            },
            // 挂载之后被调用，el被新创建的vm.$el替换，挂载成功。
            mounted:function(){
                console.log('mounted')
            },
            // 数据更新之前被调用
            beforeUpdate:function(){
                console.log('beforeUpdate')
            },
            // 数据更新之后被调用
            updated:function () {
                console.log('updated')
            },
            //
            beforeDestroy:function () {
                console.log('beforeDestroy')
            },
            destroyed:function () {
                console.log('destroyed')
            },
            methods: {
                changeState:function(){
                    if(this.h1_flag){
                        // app.h1_flag = false
                        this.h1_flag = false
                    }else{
                        this.h1_flag = true
                    }
                },
            }
        })
    </script>
</body>
</html>